<template>
  <div class="mc-query">
    <div class="mc-query-box">
      <div class="mc-query-row" v-for="(line,idx) in list" v-if="line.visible">
        <div class="mc-query-title">{{line.title}}</div>
        <div class="mc-query-content">
          <div v-for="(item,index) in line.condition" :key="idx+'-'+index" @click="choose(item,line)"
               :class="['item',item.check?'activeCss':'']">{{item.label}}</div>
        </div>
      </div>
    </div>
    <!-- 商品展示 -->
  </div>

</template>

<script>
export default {
  name: 'mc-query',
  data () {
    return {
        list:this.data
    }
  },
  //暂时预定10个参数 大部分用户2-3个就够了
  props: {
    'data' : {type:Array,default:null},
    'clickCancel' : {type:Boolean,default:true},
  },
  mounted () {

  },
  //监听下变更 再动态修改url 经常会出现 绑定了输入框的值
  watch:{
    //双向绑定
      data(val){
        this.list = val;
      }
  },
  methods:{
    getVisible(line){
      if(line.visible===false){
        return false;
      }
      return true;
    },
     choose(item,line){
       var checked = !item.check;
       if(!this.clickCancel){
         checked=true;
       }
       var condition = line.condition;
       for(var i=0;i<condition.length;i++){
         var con = condition[i];
         this.$set(con,"check",false);
       }
       if(checked){
         line.value=item.key;
       }else {
         line.value=null;
         for(var i=0;i<condition.length;i++){
           var con = condition[i];
           if(con.key!==0 && !con.key ){
             this.$set(con,"check",true);
           }
         }
       }
       item.check = checked;
       if(line.value==null || line.value==''){
         this.hideShowChildren(line,false);
       }else {
         this.hideShowChildren(line,true);
       }
       this.$emit("change",{choose:item,query:this.findQuery()})
     },
      hideShowChildren:function (line,trueFalse) {
        var children = line.children;
        if(!children){
            return;
        }
        var map = {};
        for(var i=0;i<children.length;i++){
          map[children[i]]=true;
        }
        var arr = this.list;
        for(var i=0;i<arr.length;i++){
          var item = arr[i];
          if(map[item.name]){
            item.visible=trueFalse;
          }
        }
      },
     findQuery:function () {
        var query = {};
        for(var i=0;i<this.list.length;i++){
          var item = this.list[i];
          var condition=item.condition;
          if(condition){
            for(var j =0;j<condition.length;j++){
              var con = condition[j];
              if(con.check){
                query[item.name]=con.key;
              }
            }
          }
        }
        return query;
     },
      set(array){
        if(array==null){
          this.list=[]
        }else{
          this.list = array;
        }
      },
      getData(){
        return this.list;
      }
  }
}
</script>

<style lang="scss">
  .magicalcoder-dragging .mc-query{
      min-width: 100px;
      min-height: 40px;
      border:1px solid #5976cf;
  }
  .mc-query * {
    box-sizing: border-box;
  }
  .mc-query{
    /*margin: 100px auto;*/
    /*width: 700px;*/
    /*border: 1px solid #ccc;*/
    /*border-radius: 3px;*/
  }
  .mc-query-title{
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 20px;
  }
  .mc-query-box{
    width: 100%;
    /*border-bottom: 1px solid #ccc;*/
  }
  .mc-query-row{
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0px 10px;
  }
  .mc-query-row > div{
    flex-shrink: 0;
  }
  .mc-query-row .mc-query-content{
    flex: 1;
    display: flex;
    margin-left:20px;
  }
  .mc-query-row .mc-query-content .item{
    border-radius: 3px;
    color: #666;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    background-color: #F5F7FA;
    margin:0 4px;
  }
  .mc-query-row .mc-query-content .activeCss{
    background: #33C182;
    color: #FFFFFF;
  }
  .mc-query-content-box{
    width: 100%;
    height: 450px;
    overflow: auto;
    padding: 10px;
  }

</style>
